<template>
	<view>
		<navbar :backshow="true" :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight"></navbar>
		<!-- 头部展位 -->
		<view class="main" :style="{ height: mainheight + 'px' }"></view>
		<!-- 信息预览展示 -->
		<view class="bookxqbox">
			<view class="bookitemssd">
				<view class="bookitemlabnames bookitemlabnamesd">预约设备：</view>
				<view class="devbok">
					<view class="devit" v-for="item in formData.deviceDetail">
						<view class="devnam">
							{{item.deviceName}}
						</view>
						<view class="devnamb">
							{{item.number}}
						</view>
					</view>
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabnames">开始时间：</view>
				<view class="bookitemlab">
					{{formData.startTime }}
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabnames">结束时间：</view>
				<view class="bookitemlab">
					{{formData.startTime }}
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabname">备注：</view>
				<view class="bookitemlab">
					{{formData.remark }}
				</view>
			</view>
		</view>
		<view class="tjylzw"></view>
		<view class="tjyl" @click="sava">
			提交预约信息
		</view>
		<view class="tjyls" @click="back">
			我要修改一下
		</view>
		<view class="tjylzw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "预约设备",
				navBarHeight: 0, // 导航栏高度
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				mainheight: 0,
				activeTab: 0,
				formData: {}
			}
		},
		onLoad() {
			const that = this;

			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			that.mainheight = menuButtonInfo.top + menuButtonInfo.height;
			// 获取一下 最新数据

			uni.getStorage({
				key: "deviceData",
				success: (res) => {
					console.log("获取的数据：", res.data);
					// 可以在这里处理获取到的数据
					this.formData = res.data;
					// this.getuser();
				},
				fail: function() {
					console.error("获取数据失败");
				},
			});

		},
		methods: {
			sava() {
				this.$myRequest({
					url: "/client/appointment/submitDeviceAppointment",
					method: "POST",
					data: {
						deviceDetail: JSON.stringify(this.formData.deviceDetail),
						startTime: this.formData.startTime,
						endTime: this.formData.endTime,
						remark: this.formData.remark,
					}
				}).then((res) => {
					// this.devlist = res.data;
					if (res.code == 200) {
						uni.navigateTo({
							url: "/pages/devsucces/devsucces", // 要跳转的非 tabBar 页面路径，
						});
						uni.setStorage({
							key: "deviceData",
							data: {
								deviceDetail: [],
								startTime: '',
								endTime: '',
								remark: ''
							},
							success: function() {
								console.log("数据清空成功");
								uni.navigateTo({
									url: "/pages/devsave/devsave", // 要跳转的非 tabBar 页面路径，可以带参数
								});
							},
						});
					}
					if (res.code == 500) {
						uni.navigateTo({
							url: "/pages/deverror/deverror", // 要跳转的非 tabBar 页面路径，
						});
					}

				});
			},
			back() {
				uni.navigateTo({
					url: "/pages/devbook/devbook", // 要跳转的非 tabBar 页面路径，可以带参数
				});
			},
		}
	}
</script>

<style>

</style>